// console.log('hello world Mr.Liu');


// 从 react 的包当中引入了 React。只要你要写 React.js 组件就必须引入React, 因为react里有一种语法叫JSX，  jsx == js+xml
import React from 'react' // 在17版本以后不单独引入这个也可以正常渲染了
// ReactDOM 可以帮助我们把 React 组件渲染到页面上去，没有其它的作用了。它是从 react-dom 中引入的，而不是从 react 引入。
import ReactDOM from 'react-dom'

// import App from './01-base/01-class组件';
// import App from './01-base/02-函数式组件';
// import App from './01-base/03-组件的嵌套';
// import App from './01-base/04-组件的样式';
// import App from './01-base/05-事件绑定';
// import App from './01-base/06-事件绑定-2';
// import App from './01-base/07-ref';
// import App from './01-base/08-state';
// import App from './01-base/09-数组循环渲染';
// import App from './01-base/10-案例-todolist';
// import App from './01-base/11-dangerouslySetInnerHTML';
// import App from './01-base/12-卖座选项卡';
// import App from './01-base/13-setState同步异步';
// import App from './01-base/14-betterScroll';
// import App from './01-base/15-betterScroll-cinema';
// import App from './01-base/16-prop';
// import App from './01-base/17-props函数式组件';
// import App from './01-base/18-状态vs属性';
// import App from './01-base/19-非受控';
// import App from './01-base/20-受控';
// import App from './01-base/21-受控cinema';
// import App from './01-base/22-受控todolist';
import App from './02-advanced/01-子传父';


// 下面是 react17 的语法， react18里引入 ReactDOM 和渲染页面的方式有所变化
// ReactDOM.render('111111', document.getElementById('root'))

// ReactDOM里有一个render方法，功能就是把组件渲染并且构造 DOM 树，然后插入到页面上某个特定的元素上
ReactDOM.render(
    // <React.StrictMode> { /* 开启严格模式 => 把我们的组件放在react提供的这个标签里面 */}
    <App /> // {/* 渲染引入的组件 */ }
    // </React.StrictMode>
    , document.getElementById('root'))


/**
 * JSX —> 使用react构造组件，bable进行编译 —> JavaScript对象 —> ReactDOM.render() —> DOM
元素 —> 插入页面
 */

// 上面的代码等价于下面的代码 => babel就是将上面的代码转换成下面的代码
// ReactDOM.render(React.createElement('div', {
//     id: 'aaa',
//     className: 'bbb' // 这里写 class 会有警告
// }, '111111'), document.getElementById('root'))
